<template>
  <el-dialog
    :close-on-click-modal="false"
    :title="!dataForm.id ? '新增' : '修改'"
    :visible.sync="visible"
    width="75%"
  >
    <el-form
      ref="dataForm"
      :model="dataForm"
      :rules="dataRule"
      @keyup.enter.native="dataFormSubmit()"
    >
      <el-form-item label="等级名称" prop="name">
        <el-input v-model="dataForm.name" placeholder="等级名称" style="width: 40%"/>
      </el-form-item>
      <el-form-item label="等级图标" prop="icon">
        <single-upload v-model="dataForm.icon"/>
      </el-form-item>
      <el-form-item label="邀请权限" prop="invitePer">
        <el-radio-group v-model="dataForm.invitePer" style="width: 178px">
          <el-radio :label="true">启用</el-radio>
          <el-radio :label="false">关闭</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="充值权限" prop="rechargeAuth">
        <el-radio-group v-model="dataForm.rechargeAuth" style="width: 178px">
          <el-radio :label="true">启用</el-radio>
          <el-radio :label="false">关闭</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="分销权限" prop="rechargeDistributionPer">
        <el-radio-group v-model="dataForm.rechargeDistributionPer" style="width: 178px">
          <el-radio :label="true">启用</el-radio>
          <el-radio :label="false">关闭</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="升级金额（一次性充值）" prop="upgradeMoney">
        <el-input-number v-model="dataForm.upgradeMoney" :min="0" :precision="2" controls-position="right"/>
        <span style="margin-left: 10px">
          <i class="el-icon-info"/>
          单位为元
        </span>
      </el-form-item>
      <el-form-item label="首充金额" prop="firstRechargeMoney">
        <el-input-number v-model="dataForm.firstRechargeMoney" :min="0" :precision="2" controls-position="right"/>
        <span style="margin-left: 10px">
          <i class="el-icon-info"/>
          单位为元
        </span>
      </el-form-item>
      <el-form-item label="最少充值金额" prop="leastRechargeMoney">
        <el-input-number v-model="dataForm.leastRechargeMoney" :min="0" :precision="2" controls-position="right"/>
        <span style="margin-left: 10px">
          <i class="el-icon-info"/>
          单位为元
        </span>
      </el-form-item>
      <el-form-item label="最少提货金额" prop="leastMoney">
        <el-input-number v-model="dataForm.leastMoney" :min="0" :precision="2" controls-position="right"/>
        <span style="margin-left: 10px">
          <i class="el-icon-info"/>
          单位为元
        </span>
      </el-form-item>
      <el-form-item label="总代充值折扣" prop="systemDiscount">
        <el-input-number v-model="dataForm.systemDiscount" :min="0" :precision="1" controls-position="right"/>
        <span style="margin-left: 10px">
          <i class="el-icon-info"/>
          单位为%  <span style="color: red">(注: 总代扣除货款 = 实际充值货款 - 实际充值货款 * 总代充值折扣)</span>
        </span>
      </el-form-item>
      <el-form-item label="充值折扣" prop="discount">
        <el-input-number v-model="dataForm.discount" :min="0" :precision="1" controls-position="right"/>
        <span style="margin-left: 10px">
          <i class="el-icon-info"/>
          单位为%  <span style="color: red">(注: 到账货款 = 实际充值货款 + 实际充值货款 * 充值折扣)</span>
        </span>
      </el-form-item>
      <el-form-item v-if="dataForm.rechargeAuth" label="下级充值折扣" prop="lowerDiscount">
        <el-input-number v-model="dataForm.lowerDiscount" :min="0" :precision="1" controls-position="right"/>
        <span style="margin-left: 10px">
          <i class="el-icon-info"/>
          单位为% <span style="color: red">(注: 扣除货款 = 下级实际充值货款 - 下级实际充值货款 * 下级充值折扣)</span>
        </span>
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-radio-group v-model="dataForm.status" style="width: 178px">
          <el-radio :label="1">启用</el-radio>
          <el-radio :label="0">关闭</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="备注" prop="note">
        <el-input v-model="dataForm.note" placeholder="备注" style="width: 50%;"/>
      </el-form-item>
      <el-form-item label="等级协议内容">
        <tinymce v-if="visible" v-model="dataForm.agreement" :min-height="192"/>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { addMember_level, getMember_level, updateMember_level } from '@/api/ums/member_level'
import SingleUpload from '@/components/Upload/SingleUpload'
import Tinymce from '@/components/Tinymce'

export default {
  components: { SingleUpload, Tinymce },
  data() {
    return {
      visible: false,
      dataForm: {
        id: 0,
        name: '',
        icon: '',
        status: 1,
        invitePer: false,
        rechargeAuth: false,
        rechargeDistributionPer: false,
        systemDiscount: 0,
        discount: 0,
        lowerDiscount: 0,
        lowerMoney: 0,
        levelMoney: 0,
        lowerGoodsMoney: 0,
        leastMoney: 0,
        upgradeMoney: 0,
        cashDeposit: 0,
        leastRechargeMoney: 0,
        firstRechargeMoney: 0,
        note: '',
        agreement: ''
      },
      dataRule: {
        name: [
          { required: true, message: '等级名称不能为空', trigger: 'blur' }
        ],
        icon: [
          { required: true, message: '请上传等级图标', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    init(id) {
      this.dataForm.id = id || 0
      this.visible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].resetFields()
        if (this.dataForm.id) {
          getMember_level(this.dataForm.id).then(({ data }) => {
            this.dataForm = data
          })
        }
      })
    },
    // 表单提交
    dataFormSubmit() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          if (!this.dataForm.id) {
            addMember_level(this.dataForm).then(({ data }) => {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.visible = false
                  this.$emit('refreshDataList')
                }
              })
            })
          } else {
            updateMember_level(this.dataForm).then(({ data }) => {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.visible = false
                  this.$emit('refreshDataList')
                }
              })
            })
          }
        }
      })
    }
  }
}
</script>
